<!--
	作者：956911785@qq.com
	时间：2019年5月17日16:10:23
	描述：社团活动辅导教师
-->

<template>
 	<Modal title="辅导教师" v-model="modal1" width="780px" @on-ok="onsure" >
        <div style="width:100%;height: auto;overflow: hidden;">
        	<Form :label-width="100" label-position="right">		
	        	<div style="width:100%;float:left;">
	        		<FormItem  prop="tname" label="教师姓名">
						<Select transfer class="input" filterable remote :remote-method="handleSearch" 
							v-model="params.tid" placeholder="请输入教师姓名" style="width:50%">
							<Option :value="item.TID" @click.native="selectTea(item)"  v-for="item in tdata">{{item.TNAME}}</Option>
						</Select>
						<Button size="small" @click="addTea" 
							class="input" style="width:20%;font-size: 14px;" type="primary">新增</Button>
					</FormItem>
	        	</div>	
        	</Form>	
        	
        	<div style="width:100%;float:left;margin-top:10px;height:50px;line-height:50px;">
	        	<div style="padding-left:2%;text-align: left; float: left;color:#319ba1;">添加的教师</div>
        	</div>
        	
        	
        	<div v-for="(te, index) in tes"  style="width:100%;float: left;overflow: hidden;border-top: 1px solid #ebebeb;padding-top:8px;padding-bottom:8px;">
        		<div style="width:80%;float: left;">
        			<label style="padding-left:3%;float:left;width:100%;">教师姓名：{{te.tname}}</label>
        			<label style="padding-left:3%;float:left;width:100%;">简介：{{te.jianjie}}</label>
        		</div>
        		<div style="width:20%;float: left;">
        			<a style="color:#319ba1;" v-on:click="deltea(index)">删除</a>
        		</div>
        	</div>
	    </div> 
 	</Modal>
</template>

<script>
	
	export default {
		name:"addteacher",
		props: {
    		teachers:{
    			type:Array,
    			required:true
    		}
    	},
		data() {
			return {
				modal1:false,
				tes:[],
				params:{
					tname:'',
					jianjie:'',
					tid:'', 
				}, 
				tdata:[]
			}
		},
		methods: {
			//添加确定
			addTea: function(values){	
				const teacher=this.params;
				const teacs=this.tes;
				for(var i=0;i<teacs.length;i++){
					const teac=teacs[i];
					if(teac.tid==teacher.tid){
						this.$Modal.error({
	                        title: "失败",
	                        content: "该教师已经存在！"
	                    });	
	                    return;
					}
				}
				
				this.tes.push(teacher);
				this.params={
					tname:'',
					jianjie:'',
					tid:'', 
				};
			},
			
			//删除
			deltea (index) {
                this.tes.splice(index, 1);
            },
           
			//确定
			onsure:function(){
				this.modal1=false;
				this.$emit("onsure",this.tes);
			},
			
			//边查询边搜索
			handleSearch(value) {
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					if(value) {
						this.selectlikeTname(value, list => {
							this.tdata = list;
						});
					} else {
						this.tdata = [];
					}
				}, 200);
			},
			
			selectlikeTname(mc, backcall) {
				this.$http.post("/host/stgl/teacher/GetTeacherByTname.html", {tname:mc})
				.then(result => {
					backcall(result);
				})
			},
			
			
			selectTea(tea){
				this.params={
					tname:tea.TNAME,
					jianjie:tea.JIANJIE,
					tid:tea.TID,
				}
			}
			
		},
		mounted() {
		},
		watch:{
			modal1:function(newvalues,oldvalues){
			 	if(newvalues){
			 		this.params={
						tname:'',
						tid:'',
					};
					this.tes=[...this.teachers];
			 	}
			}
		}	
	}
</script>

<style>
	
</style>



